<template>
  <view class="page-container">
    <!-- 顶部导航栏 -->
    <view class="header">
      <view class="header-content">
        <view class="header-left">
          <view class="back-btn" @click="goBack">
            <text class="icon">←</text>
          </view>
          <text class="header-title">投放记录</text>
        </view>
        <view class="header-right">
          <view class="header-icon-btn">
            <text class="icon">📅</text>
          </view>
          <view class="header-icon-btn">
            <text class="icon">🔍</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 时间筛选区域 -->
    <view class="filter-section">
      <view class="filter-content">
        <view class="date-input-group">
          <view class="date-input-wrapper">
            <text class="date-icon">📅</text>
            <input 
              class="date-input" 
              type="date" 
              v-model="startDate"
              placeholder="开始日期"
            />
          </view>
          <text class="date-separator">至</text>
          <view class="date-input-wrapper">
            <text class="date-icon">📅</text>
            <input 
              class="date-input" 
              type="date" 
              v-model="endDate"
              placeholder="结束日期"
            />
          </view>
          <button class="search-btn" @click="searchRecords">查询</button>
        </view>
      </view>
    </view>

    <!-- 主内容区 -->
    <view class="main-content">
      <!-- 统计概览 -->
      <view class="stats-section">
        <view class="stats-grid">
          <view class="stat-card">
            <text class="stat-label">总重量</text>
            <view class="stat-content">
              <text class="stat-value">86.5kg</text>
              <view class="stat-trend">
                <text class="trend-icon">↑</text>
                <text class="trend-text">12.3%</text>
              </view>
            </view>
          </view>
          <view class="stat-card">
            <text class="stat-label">总次数</text>
            <view class="stat-content">
              <text class="stat-value">128</text>
              <view class="stat-trend">
                <text class="trend-icon">↑</text>
                <text class="trend-text">8.7%</text>
              </view>
            </view>
          </view>
          <view class="stat-card">
            <text class="stat-label">总收益</text>
            <view class="stat-content">
              <text class="stat-value">¥568.20</text>
              <view class="stat-trend">
                <text class="trend-icon">↑</text>
                <text class="trend-text">15.2%</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 分类统计 -->
      <view class="category-section">
        <view class="category-card">
          <text class="section-title">分类统计</text>
          <view class="category-grid">
            <view class="category-item">
              <view class="category-icon paper-icon">
                <text class="icon">📦</text>
              </view>
              <text class="category-label">纸壳类</text>
              <text class="category-value">42.8kg</text>
            </view>
            <view class="category-item">
              <view class="category-icon fabric-icon">
                <text class="icon">👕</text>
              </view>
              <text class="category-label">织物类</text>
              <text class="category-value">23.5kg</text>
            </view>
            <view class="category-item">
              <view class="category-icon mixed-icon">
                <text class="icon">♻️</text>
              </view>
              <text class="category-label">混合类</text>
              <text class="category-value">15.2kg</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 投放记录列表 -->
      <view class="records-section">
        <view class="records-card">
          <view class="records-header">
            <text class="section-title">投放明细</text>
            <view class="sort-controls">
              <text class="sort-label">排序:</text>
              <picker 
                :value="sortIndex" 
                :range="sortOptions" 
                @change="onSortChange"
                class="sort-picker"
              >
                <text class="sort-text">{{sortOptions[sortIndex]}}</text>
              </picker>
            </view>
          </view>
          
          <!-- 记录列表 -->
          <view class="records-table" v-if="records.length > 0">
            <view class="table-header">
              <text class="header-cell">时间</text>
              <text class="header-cell">类型</text>
              <text class="header-cell">重量</text>
              <text class="header-cell">单价</text>
              <text class="header-cell">金额</text>
            </view>
            <view class="table-body">
              <view 
                class="table-row" 
                v-for="(record, index) in records" 
                :key="index"
              >
                <view class="table-cell">
                  <text class="cell-date">{{record.date}}</text>
                  <text class="cell-time">{{record.time}}</text>
                </view>
                <view class="table-cell">
                  <text 
                    class="type-tag" 
                    :class="getTypeClass(record.type)"
                  >
                    {{record.type}}
                  </text>
                </view>
                <view class="table-cell">
                  <text class="cell-value">{{record.weight}}</text>
                </view>
                <view class="table-cell">
                  <text class="cell-value">{{record.price}}</text>
                </view>
                <view class="table-cell">
                  <text class="cell-value amount">{{record.amount}}</text>
                </view>
              </view>
            </view>
          </view>

          <!-- 空状态 -->
          <view class="empty-state" v-else-if="!loading">
            <view class="empty-icon">
              <text class="icon">📄</text>
            </view>
            <text class="empty-text">暂无投放记录</text>
            <button class="empty-btn" @click="goToRecycle">
              去投放
              <text class="icon">→</text>
            </button>
          </view>

          <!-- 加载状态 -->
          <view class="loading-state" v-if="loading">
            <text class="loading-icon">⏳</text>
            <text class="loading-text">加载中...</text>
          </view>

          <!-- 加载更多 -->
          <view class="load-more" v-if="records.length > 0">
            <button class="load-more-btn" @click="loadMore">
              加载更多
            </button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        title: '记录',
        startDate: '',
        endDate: '',
        loading: false,
        records: [],
        sortIndex: 0,
        sortOptions: ['最新时间', '最早时间', '重量最高', '收益最高']
      }
    },
    onLoad() {
      this.initPage()
    },
    methods: {
      // 初始化页面
      initPage() {
        // 设置默认日期范围为最近30天
        const today = new Date()
        const thirtyDaysAgo = new Date()
        thirtyDaysAgo.setDate(today.getDate() - 30)
        
        this.endDate = this.formatDate(today)
        this.startDate = this.formatDate(thirtyDaysAgo)
        
        // 加载投放记录
        this.loadRecords()
      },
      
      // 格式化日期
      formatDate(date) {
        const year = date.getFullYear()
        const month = String(date.getMonth() + 1).padStart(2, '0')
        const day = String(date.getDate()).padStart(2, '0')
        return `${year}-${month}-${day}`
      },
      
      // 返回上一页
      goBack() {
        uni.navigateBack()
      },
      
      // 查询记录
      searchRecords() {
        this.loadRecords()
      },
      
      // 加载投放记录
      loadRecords() {
        this.loading = true
        
        // 模拟异步加载数据
        setTimeout(() => {
          // 模拟记录数据
          this.records = [
            {date: '2023-06-15', time: '09:30', type: '纸壳类', weight: '2.5kg', price: '¥1.40/kg', amount: '¥3.50'},
            {date: '2023-06-12', time: '16:45', type: '织物类', weight: '2.8kg', price: '¥1.86/kg', amount: '¥5.20'},
            {date: '2023-06-10', time: '11:20', type: '混合类', weight: '1.8kg', price: '¥2.11/kg', amount: '¥3.80'},
            {date: '2023-06-08', time: '15:40', type: '纸壳类', weight: '3.2kg', price: '¥1.40/kg', amount: '¥4.48'},
            {date: '2023-06-05', time: '08:15', type: '塑料类', weight: '0.5kg', price: '¥2.00/kg', amount: '¥1.00'},
            {date: '2023-06-03', time: '18:30', type: '织物类', weight: '1.5kg', price: '¥1.86/kg', amount: '¥2.79'},
            {date: '2023-06-01', time: '10:25', type: '混合类', weight: '2.2kg', price: '¥2.11/kg', amount: '¥4.64'},
          ]
          
          this.loading = false
        }, 800)
      },
      
      // 获取类型样式类
      getTypeClass(type) {
        switch(type) {
          case '纸壳类':
            return 'type-paper'
          case '织物类':
            return 'type-fabric'
          case '混合类':
            return 'type-mixed'
          case '塑料类':
            return 'type-plastic'
          default:
            return 'type-default'
        }
      },
      
      // 排序改变
      onSortChange(e) {
        this.sortIndex = e.detail.value
        // 这里可以根据排序选项重新排序数据
        this.sortRecords()
      },
      
      // 排序记录
      sortRecords() {
        const sortType = this.sortOptions[this.sortIndex]
        switch(sortType) {
          case '最新时间':
            this.records.sort((a, b) => new Date(b.date + ' ' + b.time) - new Date(a.date + ' ' + a.time))
            break
          case '最早时间':
            this.records.sort((a, b) => new Date(a.date + ' ' + a.time) - new Date(b.date + ' ' + b.time))
            break
          case '重量最高':
            this.records.sort((a, b) => parseFloat(b.weight) - parseFloat(a.weight))
            break
          case '收益最高':
            this.records.sort((a, b) => parseFloat(b.amount.replace('¥', '')) - parseFloat(a.amount.replace('¥', '')))
            break
        }
      },
      
      // 加载更多
      loadMore() {
        // 模拟加载更多数据
        setTimeout(() => {
          const moreRecords = [
            {date: '2023-05-28', time: '14:20', type: '纸壳类', weight: '1.8kg', price: '¥1.40/kg', amount: '¥2.52'},
            {date: '2023-05-25', time: '09:45', type: '织物类', weight: '3.2kg', price: '¥1.86/kg', amount: '¥5.95'},
          ]
          this.records = this.records.concat(moreRecords)
        }, 500)
      },
      
      // 去投放页面
      goToRecycle() {
        uni.navigateTo({
          url: '/pages/recycle/recycle'
        })
      },
      
    }
  }
</script>

<style>
  /* 全局样式重置 */
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  /* 页面容器 */
  .page-container {
    width: 100%;
    min-height: 100vh;
    background-color: #f5f5f5;
    color: #333;
  }

  /* 顶部导航栏 */
  .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    z-index: 999;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  }

  .header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 30rpx;
  }

  .header-left {
    display: flex;
    align-items: center;
  }

  .back-btn {
    width: 60rpx;
    height: 60rpx;
    border-radius: 15rpx;
    background-color: #e6f7ff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20rpx;
  }

  .back-btn .icon {
    color: #1890ff;
    font-size: 32rpx;
  }

  .header-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
  }

  .header-right {
    display: flex;
    align-items: center;
    gap: 20rpx;
  }

  .header-icon-btn {
    width: 60rpx;
    height: 60rpx;
    border-radius: 15rpx;
    background-color: #f0f2f5;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .header-icon-btn .icon {
    color: #1890ff;
    font-size: 32rpx;
  }

  /* 时间筛选区域 */
  .filter-section {
    position: fixed;
    top: 100rpx;
    left: 0;
    right: 0;
    background: white;
    z-index: 990;
    border-bottom: 1px solid #f0f0f0;
    padding: 20rpx 0;
  }

  .filter-content {
    padding: 0 30rpx;
  }

  .date-input-group {
    display: flex;
    align-items: center;
    gap: 20rpx;
  }

  .date-input-wrapper {
    position: relative;
    flex: 1;
  }

  .date-icon {
    position: absolute;
    left: 24rpx;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    font-size: 24rpx;
  }

  .date-input {
    width: 100%;
    padding: 16rpx 24rpx 16rpx 70rpx;
    border: 1px solid #e0e0e0;
    border-radius: 10rpx;
    font-size: 26rpx;
    background: white;
    height: 72rpx;
    box-sizing: border-box;
  }

  .date-separator {
    color: #999;
    font-size: 26rpx;
  }

  .search-btn {
    background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
    color: white;
    padding: 0 30rpx;
    border-radius: 10rpx;
    font-size: 26rpx;
    font-weight: bold;
    border: none;
    box-shadow: 0 2rpx 8rpx rgba(24, 144, 255, 0.3);
    height: 72rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }

  /* 主内容区 */
  .main-content {
    padding-top: 220rpx;
    padding-bottom: 100rpx;
    padding-left: 30rpx;
    padding-right: 30rpx;
  }

  /* 统计概览 */
  .stats-section {
    margin-bottom: 30rpx;
  }

  .stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20rpx;
  }

  .stat-card {
    background: white;
    border-radius: 15rpx;
    padding: 25rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  }

  .stat-label {
    color: #999;
    font-size: 24rpx;
    margin-bottom: 8rpx;
    display: block;
  }

  .stat-content {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
  }

  .stat-value {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
  }

  .stat-trend {
    display: flex;
    align-items: center;
    color: #52c41a;
    font-size: 24rpx;
  }

  .trend-icon {
    margin-right: 8rpx;
    font-size: 20rpx;
  }

  /* 分类统计 */
  .category-section {
    margin-bottom: 30rpx;
  }

  .category-card {
    background: white;
    border-radius: 15rpx;
    padding: 30rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  }

  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
    color: #333;
  }

  /* 浅色背景类 - 与index.vue保持一致 */
  .bg-light-blue {
    background-color: #e6f7ff;
  }
  
  .bg-light-green {
    background-color: #f6ffed;
  }
  
  .bg-light-orange {
    background-color: #fff7e6;
  }

  .category-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20rpx;
  }

  .category-item {
    text-align: center;
    padding: 24rpx;
    border-radius: 15rpx;
  }

  .category-item:nth-child(1) {
    background: #e6f7ff;
  }

  .category-item:nth-child(2) {
    background: #f6ffed;
  }

  .category-item:nth-child(3) {
    background: #fff7e6;
  }

  .category-icon {
    width: 80rpx;
    height: 80rpx;
    margin: 0 auto 16rpx;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40rpx;
  }

  .paper-icon {
    background: #e6f7ff;
    color: #1890ff;
  }

  .fabric-icon {
    background: #f6ffed;
    color: #52c41a;
  }

  .mixed-icon {
    background: #fff7e6;
    color: #fa8c16;
  }

  .category-label {
    font-size: 24rpx;
    color: #999;
    margin-bottom: 8rpx;
    display: block;
  }

  .category-value {
    font-weight: bold;
    color: #333;
  }

  /* 投放记录列表 */
  .records-section {
    margin-bottom: 30rpx;
  }

  .records-card {
    background: white;
    border-radius: 15rpx;
    padding: 30rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  }

  .records-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25rpx;
  }

  .sort-controls {
    display: flex;
    align-items: center;
    gap: 16rpx;
  }

  .sort-label {
    font-size: 24rpx;
    color: #999;
  }

  .sort-picker {
    border: none;
    background: transparent;
    color: #1890ff;
    font-size: 24rpx;
  }

  .sort-text {
    color: #1890ff;
    font-size: 24rpx;
  }

  /* 表格样式 */
  .records-table {
    overflow-x: auto;
  }

  .table-header {
    display: flex;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 20rpx;
  }

  .header-cell {
    flex: 1;
    font-weight: 500;
    color: #999;
    font-size: 26rpx;
    text-align: left;
  }

  .table-body {
    margin-top: 20rpx;
  }

  .table-row {
    display: flex;
    border-bottom: 1rpx solid #f0f0f0;
    padding: 25rpx 0;
  }

  .table-row:last-child {
    border-bottom: none;
  }

  .table-cell {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8rpx;
  }

  .cell-date {
    font-weight: 500;
    color: #333;
    font-size: 26rpx;
  }

  .cell-time {
    font-size: 24rpx;
    color: #999;
  }

  .type-tag {
    padding: 8rpx 16rpx;
    border-radius: 50rpx;
    font-size: 24rpx;
    font-weight: 500;
    align-self: flex-start;
  }

  .type-paper {
    color: #1890ff;
    background: #e6f7ff;
  }

  .type-fabric {
    color: #52c41a;
    background: #f6ffed;
  }

  .type-mixed {
    color: #fa8c16;
    background: #fff7e6;
  }

  .type-plastic {
    color: #722ed1;
    background: #f9f0ff;
  }

  .cell-value {
    font-weight: 500;
    color: #333;
    font-size: 26rpx;
  }

  .cell-value.amount {
    color: #52c41a;
  }

  .cell-label {
    font-size: 24rpx;
    color: #999;
  }

  /* 空状态 */
  .empty-state {
    padding: 100rpx 0;
    text-align: center;
  }

  .empty-icon {
    width: 160rpx;
    height: 160rpx;
    margin: 0 auto 25rpx;
    border-radius: 50%;
    background: #f0f2f5;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .empty-icon .icon {
    color: #999;
    font-size: 60rpx;
  }

  .empty-text {
    color: #999;
    font-size: 26rpx;
    margin-bottom: 20rpx;
    display: block;
  }

  .empty-btn {
    color: #1890ff;
    font-size: 26rpx;
    font-weight: bold;
    background: none;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8rpx;
  }

  /* 加载状态 */
  .loading-state {
    padding: 80rpx 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16rpx;
  }

  .loading-icon {
    color: #999;
    font-size: 28rpx;
    animation: spin 1s linear infinite;
  }

  .loading-text {
    color: #999;
    font-size: 26rpx;
  }

  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  /* 加载更多 */
  .load-more {
    margin-top: 30rpx;
    text-align: center;
  }

  .load-more-btn {
    width: 100%;
    padding: 16rpx 0;
    border: 1px solid #1890ff;
    color: #1890ff;
    border-radius: 10rpx;
    font-size: 26rpx;
    font-weight: bold;
    background: white;
  }

  /* 图标样式 */
  .icon {
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* 响应式调整 */
  @media screen and (max-width: 750rpx) {
    .stats-grid {
      grid-template-columns: 1fr;
      gap: 20rpx;
    }
    
    .category-grid {
      grid-template-columns: 1fr;
      gap: 20rpx;
    }
    
    .date-input-group {
      flex-direction: column;
      gap: 16rpx;
    }
    
    .date-input-wrapper {
      width: 100%;
    }
  }
</style>